<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Web Storage</title>
	<style>
		#edit {
			border:1px solid #f00;
		}
	</style>
</head>

<body>
	<p>IE浏览器的userData、Adobe在Flash6引入的本地共享对象(Local Shared Objects)、Google的Gears、Adobe AIR等 本地存储的解决方案，要么是针对特定浏览器，要么依赖第三方插件。虽然
		<a href="https://github.com/dojo/dojox/tree/master/storage">dojox.storage</a>做了很大努力来统一这些本地存储的实现差异，但本身这些差异暴露出了很多问题，如接口不同、存储限制不同，以及用户体验不同。而HTML5就是来解决这些问题的：提供统一的标准API，跨浏览器的原生实现，并且完全不需要依赖第三方插件。</p>
	<p>HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。</p>

	<h1>Demo</h1>
	<div id="edit" contenteditable="true">
		修改后刷新页面看看
	</div>
	<script>
		function handle_storage(e) {
			if (!e) {
				e = window.event;
			}

			/*
			alert("storage的键名" + e.key);
			alert("storage之前的值" + e.oldValue);
			alert("storage的新数据" + e.newValue);			
			alert("调用这个触发数据区变动的函数的所属页面地址" + e.url);
			*/
		}

		var edit = document.getElementById("edit");

		 // 使用html5存储
		edit.onblur = function() {
			localStorage.setItem("content", this.innerHTML);
		};
		if (localStorage.getItem("content")) {
			edit.innerHTML = localStorage.getItem("content");
		}

		 // 跟踪html5存储区的变动
		if (window.addEventListener) {
			window.addEventListener("storage", handle_storage, false);
		} else {
			window.attachEvent("onstorage", handle_storage);
		}
	</script>
</body>

</html>